<template>
    <div class="container">
        <a-tabs class="setting-tab">
            <a-tab-pane key="list" tab="文章列表">
                <a-button type="primary" style="margin-bottom: 16px" @click="publicNews">发布文章</a-button>
                <!-- 表格 -->
                <a-table :columns="columns" :dataSource="list" :pagination="{
                    current: page.currentPage,
                    pageSize: page.pageSize,
                    total: page.total,
                    onChange: changePage
                }">
                    <template #bodyCell="{ column, record }">
                        <a-space v-if="column.dataIndex === 'operate'">
                            <a-button @click="detailRow(record.id)">详情</a-button>
                            <a-button type="primary" @click="updateRow(record.id)">编辑</a-button>
                            <a-button type="danger" @click="delRow(record.id)">删除</a-button>
                        </a-space>
                        <a-space v-if="column.dataIndex === 'image'">
                            <img style="width:60px;heigth:60px" :src="record.image" :alt="record.title">
                        </a-space>
                        <a-space v-if="column.dataIndex === 'category'">
                            {{ TYPES[record.category] }}
                        </a-space>
                        <a-space v-if="column.dataIndex === 'author'">
                            {{ record.student ? record.student.stuName : record.admin.account }}
                        </a-space>
                        <a-space v-if="column.dataIndex === 'time'">
                            {{ dayjs(record.createdAt).format('YYYY-MM-DD') }}
                        </a-space>
                    </template>
                </a-table>
            </a-tab-pane>
            <a-tab-pane key="search" tab="文章搜索">
                <search />
            </a-tab-pane>
        </a-tabs>
    </div>
    <article-form v-model:showDialog="show" :id="NewsId" :EditPost="isPost"
        @addSuccess="getList({ currentPage: page.currentPage, pageSize: page.pageSize })" />
</template>

<script setup lang='ts'>
import dayjs from 'dayjs'
import type { IPage } from '@/types/table'
import { message, Modal } from 'ant-design-vue'
import type { Post } from '@/types/posts'
import ArticleForm from '@/views/common/ArticleForm.vue'
import search from './components/search.vue'

const columns = [
    {
        title: '序号',
        customRender(obj: any) {
            // 要和当前的分页数据进行集合
            // 1 -> 1
            // 2 -> (页码 -1） * 每页条数 + 1
            return (page.currentPage - 1) * page.pageSize + obj.index + 1
        }
    },
    { title: '标题', dataIndex: 'title' },
    { title: '封面', dataIndex: 'image' },
    { title: '发布者', dataIndex: 'author' },
    { title: '类别', dataIndex: 'category' },
    { title: '发布时间', dataIndex: 'time' },
    { title: '操作', dataIndex: 'operate' }
]

const list = ref<Post[]>([])
const show = ref(false)

const page = reactive<IPage>({
    currentPage: 1,
    pageSize: 5,
    total: 0
})

type ICategoryType = {
    [key: number]: string
}

const TYPES: ICategoryType = {
    0: '考研专区',
    1: '就业专区',
    2: '校园活动'
}

/** 获取快讯列表 */
const getList = async (data: IPage) => {
    const close = message.loading('数据正在加载中...')
    const res = await getPostsList(data)
    list.value = res.data.post
    page.total = res.data.total
    close()
}
onMounted(() => {
    getList({ currentPage: page.currentPage, pageSize: page.pageSize })
})

const changePage = (c: number, p: number) => {
    page.currentPage = c,
        page.pageSize = p
    getList({ currentPage: page.currentPage, pageSize: page.pageSize })
}

const router = useRouter()
const detailRow = async (id: number) => {
    // console.log(id)
    router.push({
        path: `/detail/${id}`,
        query: {
            posts: id
        }
    })
}

const delRow = async (id: number) => {
    Modal.confirm({
        title: '提示',
        content: "确定要删除该条数据吗",
        async onOk() {
            const res = await delPost(id)
            if (res.code !== 201) return message.error('删除失败')
            message.success('删除成功')
            getList({ currentPage: page.currentPage, pageSize: page.pageSize })
        }
    })

}

const publicNews = () => {
    // show.value = true
    // NewsTitle.value = '发布快讯'
    router.push({
        path: '/article',
        query: {
            posts: 'true'
        }
    })
}

let NewsId = ref(0)
let isPost = ref(false)
const updateRow = async (id: number) => {
    show.value = true
    NewsId.value = id
    isPost.value = true
}

</script>

<style lang="less" scoped>
.container {
    padding: 16px;

    .setting-tab {
        background-color: #fff;
        padding: 16px;
        height: 100%;

        .pagination {
            margin-top: 20px;
        }
    }
}
</style>